<template>
  <div class="typeBox">
    <el-card class="box-card">
      <div class="ablityBox">
        <span style="display: flex; flex-direction: row; margin-right: 10px">
          <el-input
            v-model="query.articletypeName"
            prefix-icon="el-icon-search"
            placeholder="关键词"
          ></el-input>
          <el-button
            class="button"
            size="small"
            style="font-size: 1.1em"
            @click="getTableData"
            >搜索</el-button
          >
        </span>
        <el-button class="button" type="primary" icon="el-icon-plus" @click="handleAdd"
          >新增类型</el-button
        >
      </div>
      <div class="tableBox">
        <el-table
          :data="tableData"
          v-loading="loading"
          border
          height="100%"
          stripe
          size="small"
          style="width: 100%"
          header-cell-class-name="headerC"
        >
          <el-table-column type="index" label="索引" width="100"> </el-table-column>
          <el-table-column prop="type_name" label="类名"> </el-table-column>
          <el-table-column prop="alias" label="别名"> </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" type="primary" size="small"
                >编辑
              </el-button>
              <el-popconfirm
                style="margin-left: 10px"
                confirm-button-text="是的"
                cancel-button-text="不了"
                icon="el-icon-info"
                icon-color="red"
                title="您确定删除这条类型吗？"
                @confirm="handleDelete(scope.row)"
              >
                <el-button slot="reference" type="info" size="small">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pageBox">
        <el-pagination
          background
          layout="sizes, prev, pager, next,->, total, slot"
          :total="total"
          :page-sizes="[10, 20, 30]"
          @current-change="pageChange"
          @size-change="sizeChange"
        >
        </el-pagination>
      </div>
      <el-dialog
        :title="title"
        :visible.sync="showDialog"
        width="30%"
        :before-close="handleClose"
        :destroy-on-close="true"
      >
        <span>
          <el-form
            :rules="rules"
            ref="ruleForm"
            :model="articleType"
            class="formbox"
            label-width="80px"
          >
            <el-form-item label="类型名" prop="articletypeName">
              <el-input v-model="articleType.articletypeName"></el-input>
            </el-form-item>
            <el-form-item label="类型别名" prop="alias">
              <el-input v-model="articleType.alias"></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button
            type="primary"
            v-if="title !== '新增文章类型'"
            @click="isEditOrAddSubmit('ruleForm', 'up')"
            >确 定</el-button
          >
          <el-button type="primary" v-else @click="isEditOrAddSubmit('ruleForm', 'ad')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { articleTypeApi } from '../../apis/articleType'
const articleType = articleTypeApi()
export default {
  name: 'ArticleType',
  data () {
    return {
      tableData: [],
      query: {
        articletypeName: '',
        page: 1,
        pageSize: 10
      },
      total: 0,
      showDialog: false,
      articleType: {
        id: 0,
        articletypeName: '',
        alias: ''
      },
      title: '新增文章类型',
      rules: {
        articletypeName: [
          { required: true, message: '请输入文章类型', trigger: 'blur' },
          { max: 20, message: '不超过20个字', trigger: 'blur' }
        ],
        alias: [
          { required: true, message: '请输入文章别名', trigger: 'blur' },
          { max: 20, message: '不超过20个字', trigger: 'blur' }
        ]
      },
      loading: true
    }
  },
  methods: {
    getTableData () {
      this.loading = true
      articleType.getArticleType(this.query).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data.list
          this.total = res.data.total
          this.loading = false
        }
      })
    },
    formatData (row, type) {
      if (type === 'up') {
        this.title = '修改文章类型'
        this.articleType.id = row.type_id
        this.articleType.articletypeName = row.type_name
        this.articleType.alias = row.alias
      } else {
        this.title = '新增文章类型'
        this.articleType.id = 0
        this.articleType.articletypeName = ''
        this.articleType.alias = ''
      }
      this.showDialog = true
    },
    handleDelete (row) {
      articleType.deleteArticleType({ id: row.type_id }).then(res => {
        if (res.code !== 400) {
          this.$message({
            message: '修改成功！',
            type: 'success'
          })
          this.getTableData()
        } else {
          this.$message({
            message: '修改失败！',
            type: 'error'
          })
        }
      })
    },
    sizeChange (val) {
      this.query.pageSize = val
      this.getTableData()
    },
    pageChange (val) {
      this.query.page = val
      this.getTableData()
    },
    // 弹窗模块
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
          this.showDialog = false
        })
        .catch((_) => {})
    },
    handleEdit (row) {
      this.formatData(row, 'up')
    },
    handleAdd () {
      this.formatData({}, 'add')
    },
    isEditOrAddSubmit (ruleForm, type) {
      if (type === 'ad') {
        this.sumitAdd(ruleForm)
      } else {
        this.submitEdit(ruleForm)
      }
    },
    submitEdit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          articleType.updateArticleType(this.articleType).then(res => {
            if (res.code === 400) {
              this.$message({
                message: '修改失败',
                type: 'error'
              })
            } else {
              this.$message({
                message: '修改成功！',
                type: 'success'
              })
              this.getTableData()
              this.showDialog = false
            }
          })
        } else {
          return false
        }
      })
    },
    sumitAdd (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          articleType.addArticleType(this.articleType).then(res => {
            if (res.code === 400) {
              this.$message({
                message: '新增失败',
                type: 'error'
              })
            } else {
              this.$message({
                message: '新增成功！',
                type: 'success'
              })
              this.getTableData()
              this.showDialog = false
            }
          })
        }
      })
    }
  },
  mounted () {
    this.getTableData()
  }
}
</script>

<style scoped>
.typeBox {
  padding: 10px;
  height: 100%;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  height: 100%;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.box-card::-webkit-scrollbar {
  display: none;
}
.tableBox {
  height: 480px;
}
.pageBox {
  height: 70px;
  display: flex;
  align-items: center;
}
.ablityBox {
  width: 100%;
  display: flex;
  justify-content: left;
  margin-bottom: 10px;
}
</style>
